import {mapGetters, mapMutations} from 'vuex'
import {playMode, playModeMsg} from '../config'
import {shuffle} from '../shuffle'

export const playModeMixin = {
  data() {
    return {
      showModeMsg: false
    }
  },
  methods: {
    changeMode() {
      const mode = (this.mode + 1) % 3
      this.setMode(mode)
      let list
      if (mode === playMode.random) {
        list = shuffle(this.sequenceList)
      } else {
        list = this.sequenceList
      }
      this.showModeMsg = true
      this.modeMsgTimer = setTimeout(() => {
        this.showModeMsg = false
        clearTimeout(this.modeMsgTimer)
      }, 500)
      this.resetCurrentIndex(list)
      this.setPlayingList(list)
    },
    resetCurrentIndex(list) {
      let index = list.findIndex((item) => {
        return item.id === this.currentSong.id
      })
      this.setCurrentIndex(index)
    },
    ...mapMutations({
      setMode: 'SET_MODE',
      setPlayingList: 'SET_PLAYING_LIST',
      setCurrentIndex: 'SET_CURRENT_INDEX',
      setPlaying: 'SET_PLAYING'
    })
  },
  computed: {
    icoMode() {
      return this.mode === playMode.random ? require('../../image/random.png') : this.mode === playMode.loop ? require('../../image/loop.png') : require('../../image/sequence.png')
    },
    modeMsg() {
      return this.mode === playMode.random ? playModeMsg.random : this.mode === playMode.loop ? playModeMsg.loop : playModeMsg.sequence
    },
    ...mapGetters([
      'playingList',
      'sequenceList',
      'currentSong',
      'mode'
    ])
  }
}
